const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引用资源
const { resolve } = require('path')
const htmlPublicPath = resolve(__dirname, 'build')

module.exports = {
  // 配置
  entry: './src/index.js',
  output: {
    // 文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: htmlPublicPath,

    // f (!scriptUrl) throw new Error("Automatic publicPath is not supported in thi
    publicPath: htmlPublicPath, // 解决 html中引入img的图片路径
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
        // 默认处理不了 html中img中的 图片
        test: /\.(jpg|jpeg|png|gif)$/,
        // 使用一个loader  // 需要下载2个包 file-loader 和 url-loader(url-l 依赖于 file-l)
        loader: 'url-loader', 
        options: {
          // 图片大小 小于 50kb,就会被base64处理
          // 优点: 减少请求数量 (减轻服务器压力)
          // 缺点: 图片体积会变大(base64原因)
          limit: 30000,
          name: '/[hash:7].[ext]'

          // 现在没有这个问题(以前的不支持)
          // esModule: false, // -- 解决办法 ---
          // 问题： 因为url-loader默认使用 ES6模块化 解析，而 html-loader 引入图片是commonjs
          // 解析时会出问题: [object-Moule]
          // 解决： 关闭 url-loader的模块化，使用commonjs解析
        }
      },
      {
        test: /\.html$/,
        // 处理html文件中img的图片(负责引入img,从而被url-loader进行处理)
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    // 配置plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的html，自动移入打包输出的所有资源(js/css)
    new HtmlWebpackPlugin({
      // 创建/复制 一个html文件 (使用html模板)
      template: './src/index.html', // 最好使用 绝对路径
    }),
  ]
}